<template>
    <page-scroll :footer="false">
        <template #bg>
            <div class="bg"></div>
        </template>
        <template #header>
            <gltitle :title="title"
                    :is_name="true"
                    :is_back="true"
                    :is_lang="false"
                    :is_kf="false"
            ></gltitle>
        </template>
        
        <template #content>
        <div class="wa_hean" @click="path_url('/wallet/gold_description')">{{ $t('page4.doc4') }}</div>
      <div class="container">
  
        <div class="assets">
          <div class="n">{{ $t('page4.doc2') }}</div>
          <div class="am">{{ income_info.goldBalance }}</div>
        </div>

        <div class="record_hdrecord_hd db" style="justify-content:flex-end">
          <div class="flexs">{{ $t('page4.doc3') }}</div>
          <div class="set" @click="type_show = true">
            {{ typeTXT }}
          </div>
          <div class="set" @click="time_show = true">
            <span v-if="date == ''">{{ timeTXT }} </span>
            <span v-else>{{date}}</span>
          </div>
        </div>
  
        <div class="empty db" v-show="emptyShow" >
          <div class="flexs">
            <van-empty
                class="custom-image"
                :image="require('../../assets/images/none.png')"
                :description="$t('load.doc1')"
            />
          </div>
        </div>
  
        <van-pull-refresh v-model="refreshing" :success-text="$t('load.refreshed')"
                          @refresh="onRefresh(0)"
                          head-height="100"
                          v-if="!emptyShow"
        >
  
  
          <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
          >
            <div class="itemBox">
            <ul class="list">
              <li v-for="(item,k) in datalist" :key="k">
                <div class="wrap bet">
                  <div class="name">
                    <div class="n">
                        {{ item.type }}
                        <div class="icon_img">
                            <img v-show="item.remark" @click="popoverClick(k)" src="../../assets/images/Group4.png" alt="" />
                            <div v-if="item.active" class="popover_text">{{ item.remark }}</div>
                        </div>
                    </div>
                    <div class="time">{{ item.date }}</div>
                  </div>
                  <div class="s">
                    {{common.decal4(item.amount)}} {{ item.coinName }}
                    <div class="status">
                      {{item.status}}
                    </div>
                  </div>
                </div>
  
                <div class="pp tar" style="display: none;">
                  {{item.rejectReason}}
                </div>
              </li>
            </ul>
            </div>
          </van-list>
        </van-pull-refresh>
  
  
  
      </div>
  
  
  
    <van-popup v-model="type_show" round position="bottom" >
  
      <van-picker
          :title="$t('page.doc9')"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
      />
    </van-popup>
  
  
    <!-- <van-calendar v-model="time_show" color="#F4345D"  type="range" :min-date="minDate" :max-date="maxDate"
                  @confirm="onTimeConfirm" style="color:#000" /> -->
  
    <van-popup v-model="time_show" round position="bottom" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onTimeConfirm"
        item-height=".8rem"
  
        @cancel="time_show = !time_show"
      />
    </van-popup>
  
  
  
  
  
  
  
  
          </template>
    </page-scroll>
  </template>
  <script>
  import { mapActions, mapMutations, mapGetters } from "vuex";
  
  export default {
  
    data() {
      return {
        title:this.$t('page4.doc1'),
        income_info:[],
        is_static:this.$store.state.is_assets,
        datalist:[],
  
        timeTXT:this.$t('page.doc10'),
        startTime:'',
        endTime:'',
        yearMonth:'',
        typeTXT:this.$route.query.name ? this.$route.query.name : this.$t('page.doc11'),
        type:this.$route.query.id ? [this.$route.query.id] : [],
        datatype:[],
  
        type_show:false,
        time_show:false,
        date: '',
        columns: [this.$t('page.doc11')],
        minDate: new Date(2021, 0, 1),
        maxDate: new Date(),
  
        loading: false,
        finished: false,
  
        totalPage: "",
        pageSize: 0,
        refreshing: false,
        emptyShow:false,
        datalistNum:0,
        check:true,
        ktx:0,
        currentDate: new Date(2021, 0, 17),
        showPopover: false,
  
      };
    },
  
    mounted() {
      this.getIncome()
      this.gettype()
    },
    methods: {
      ...mapMutations([
        "SET_ISASSETS",
      ]),
      popoverClick(i){
        this.datalist[i].rejectReason = !this.datalist[i].active
        this.$set(this.datalist[i], "active", !this.datalist[i].active);
      },
      formatDate(date) {
        // let month = `${date.getMonth() + 1}` < 10 ? 0 + `${date.getMonth() + 1}` : `${date.getMonth() + 1}`
        // let getdate = `${date.getDate()}` < 10 ? 0 + `${date.getDate()}` : `${date.getDate()}`
        // return `${date.getFullYear()}-${month}-${getdate}`;
  
        let month = `${date.getMonth() + 1}` < 10 ? 0 + `${date.getMonth() + 1}` : `${date.getMonth() + 1}`
        let getdate = `${date.getDate()}` < 10 ? 0 + `${date.getDate()}` : `${date.getDate()}`
        return `${date.getFullYear()}${month}`;
      },
      onTimeConfirm(date) {
        this.time_show = false;
        this.yearMonth = `${this.formatDate(date)}`
        this.getgo()
        // return
  
        // const [start, end] = date;
        // this.time_show = false;
        // this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        // this.startTime = `${this.formatDate(start)}`
        // this.endTime = `${this.formatDate(end)}`
        // this.getgo()
      },
      onConfirm(value, index) {
        this.type_show = false
        if(index == 0){
          this.type = []
          this.typeTXT = this.$t('page.doc11')
          this.getgo()
          return
        }
        this.type = [this.datatype[index-1].code]
        this.typeTXT = this.datatype[index-1].name
        this.getgo()
      },
      onCancel() {
        this.type_show = false
      },
      gettype(){
        this.$post(this.URL.user.wallet_type,{accountType:1,coinId: 3}).then((res) => {
          if (res.code == 0) {
            this.datatype = res.data;
            res.data.forEach((e) => {
              this.columns.push(e.name)
            });
          }
        });
      },
  
      getgo(){
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.pageSize = 0
        this.totalPage = ""
        this.finished = false
        this.loading = true
        this.datalist = []
        this.emptyShow = false
        this.onLoad()
      },
  
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.datalist = []
            this.refreshing = false;
          }
          this.getlist();
        },100)
      },
      onRefresh() {
        this.finished = false
        this.loading = true
  
        this.pageSize = 0
        this.totalPage = ""
  
        this.onLoad();
      },
  
  
  
      getlist(){
        this.pageSize = this.pageSize + 1;
  
        if (this.pageIndex == this.totalPage) {
          this.loading = false;
          this.finished = true
  
          return;
        }
  
        this.$post(this.URL.user.wallet_record, {
          types:this.type,//类型
          filter:'0',//筛选条件(0-全部, -1-支出, 1-收入)
          accountType: 1, // 账户类型(1:灵活钱包[默认], 2:电子钱包, 3:积分钱包)
          coinId: 3, 
          startTime:this.startTime,
          endTime:this.endTime,
          yearMonth: this.yearMonth,
          page:this.pageSize,
          pageSize:10,
          lastId:''
        }).then((res) => {
          if (res.code == 0) {
            if(res.code == 2001){
              this.loading = true;
              this.finished = false
              this.emptyShow = true
              return
            }
            if(res.data.list.length==0){
              this.emptyShow = true
            }
            this.totalPage = res.data.page.totalPage;
            this.pageIndex = res.data.page.index;
  
            this.datalistNum = res.data.page.count
  
            let initData = res.data.list;
            this.datalist.push(...initData);
            this.loading = false;
            this.datalist.map(item => {
                item['active'] = false
            })
          }
        });
      },
  
  
  
  
      getAssetShow(){
        this.is_static = !this.$store.state.is_assets
        this.SET_ISASSETS(!this.$store.state.is_assets);
      },
      getIncome(){
        this.$post(this.URL.income.assets, {
        }).then((res) => {
          if (res.code == 0) {
            this.income_info = res.data
            this.ktx = this.income_info.totalBalance - this.income_info.pendingAmount
          }
        });
      },
  
      path_url(url){
        this.$router.push({
          path:url,
          query:{
          }
        });
      },
    },
  };
  </script>
  
  
  
  <style lang="less" scoped>
  .wa_hean{
    position: fixed;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 101;
    color: #FFF;
    font-family: PingFang SC;
    font-size: .28rem;
    font-style: normal;
    font-weight: 400;
  }
  .icon_img{
    position: relative;
    .popover_text{
        font-family: 'PingFang HK';
        font-style: normal;
        font-weight: 400;
        font-size: .28rem;
        color: #000;
        padding: .28rem;
        display: inline-block;
        width: 3.26rem;
        background: rgba(255, 255, 255, 0.90);
        position: absolute;
        left: 0;
        top: 0.4rem;
        border-radius: 0.22rem;
        border-top-left-radius: 0rem;
    }
  }
  
  .assets {
    padding: .4rem;
    text-align: center;
    background: url("../../assets/images/bg_wallet1.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;
    .n {
      line-height: .4rem;
      color: rgba(255, 255, 255, 0.5);
    }
    .am {
      font-size: .52rem;
      font-weight: 500;
      color: #ffffff;
      line-height: .73rem;
    }
    .set {
      margin: .3rem -.26rem 0 -.26rem;
      display: flex;
      button {
        height: 0.64rem;
        font-size: .28rem;
        margin: 0 .16rem;
        border-radius: 1.8rem;
        border: .02rem solid rgba(255, 255, 255, 0.20);
        background: rgba(255, 255, 255, 0.06);
  
      }
    }
  
  }
  
  
  .record_hdrecord_hd {
    margin-top: .36rem;
    .flex1 {
      font-size: .32rem;
      font-weight: 500;
      color: #ffffff;
      line-height: .42rem;
      white-space:nowrap
    }
    .set {
      background: url("../../assets/images/ico_la.png") no-repeat right center;
      background-size: .16rem auto;
      padding-right: .3rem;
      margin-left: .5rem;
      font-size: .24rem;
    }
  }
  .itemBox {
    padding: 0;
    margin-top: 0.3rem;
    background: none;
    li {
      margin-bottom: 0.2rem;
      border-radius: 0.16rem;
      background: rgba(255, 255, 255, 0.08);
      padding: 0.26rem;
      &:last-child {
        // margin-bottom: 0;border:0;
        // padding-bottom: 0;
      }
      .bet{
        .name{
          flex: 1;
          margin-right: .42rem;
            .n{
                display: flex;
                align-items: center;
                word-break: break-all;
                word-wrap: break-word;
                line-height: .32rem;
                img{
                    height: .28rem;
                    margin-left: .08rem;
                }
            }
        }
      }
      .s {
        text-align: right;
        color: var(--color1);
      }
      .time, .status {
        font-size: .24rem;
        color: #ABABB3;
      }
      .time, .status {
        margin-top: .14rem;
      }
    }
  }
  .btn{
    background: var(--backgroundLinear);
    background: none !important;
    color: #ffffff;
    font-weight: 600;
  }
  </style>